<template>
  <el-card class="form-container" shadow="never">
    <el-form :model="brand" :rules="rules" ref="brandFrom" label-width="150px">
      <el-form-item label="案例类别：">
        <el-select v-model="brand.typeId" placeholder="请选择案例类型">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="案例风格：">
        <el-select v-model="brand.styleId" placeholder="请选择案例风格">
          <el-option
            v-for="item in styleOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="案例名称：" prop="title">
        <el-input v-model="brand.title"></el-input>
      </el-form-item>
      <el-form-item label="户型：">
        <el-input v-model="brand.houseType" placeholder="如：三室一厅一厨一卫"></el-input>
      </el-form-item>
      <el-form-item label="面积：">
        <el-input style="width:300px;" placeholder="请输入数字" v-model.number="brand.area"></el-input><span style="margin-left:10px;">平米</span>
      </el-form-item>
      <el-form-item label="预算：">
        <el-input style="width:300px;" placeholder="请输入数字" v-model.number="brand.budget"></el-input><span style="margin-left:10px;">万元</span>
      </el-form-item>
      <el-form-item label="案例描述：">
        <el-input
          placeholder="请输入内容"
          type="textarea"
          v-model="brand.decription"
          :autosize="true">
        </el-input>
      </el-form-item>
      <el-form-item label="案例封面图：">
        <single-upload v-model="brand.coverPic"></single-upload>
      </el-form-item>
      <el-form-item label="案例头部图片：">
        <multi-upload :maxCount="9" v-model="brand.bannerPicsList"></multi-upload>
      </el-form-item>
      <el-form-item label="案例详情图片：">
        <multi-upload :maxCount="30" v-model="brand.detailPicsList"></multi-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('brandFrom')">保存</el-button>
        <el-button v-if="!isEdit" @click="resetForm('brandFrom')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
  import {findCaseInfo,addCase,updateCase,findCaseTypeList,findCaseStyleEntity} from '@/api/case'
  import MultiUpload from '@/components/Upload/multiUpload'
  import SingleUpload from '@/components/Upload/singleUpload'

  const defaultBrand = {
    typeId:1,//默认类型
    area: '',
    budget: '',
    caseId: 0,//案例ID
    coverPic: '',
    decription: '',
    houseType: '',
    title: '',
    style: '',
    styleId: 1,
    bannerPicsList:[],//banner列表
    detailPicsList:[]//detail列表
  };

  export default {
    name: 'CaseDetail',
    components:{
      SingleUpload,
      MultiUpload
    },
    props: {
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        brand:Object.assign({}, defaultBrand),
        typeOptions:[],//案例类型类表
        styleOptions:[],//案例风格列表
        rules: {
          title: [
            {required: true, message: '请输入品牌名称', trigger: 'blur'},
            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
          ],
          logo: [
            {required: true, message: '请输入品牌logo', trigger: 'blur'}
          ],
          sort: [
            {type: 'number', message: '排序必须为数字'}
          ],
        }
      }
    },
    created() {
      if (this.isEdit) {
        findCaseInfo(this.$route.query.id).then(response => {
          this.brand = response.data;
        },error => {
          console.log('error',error)
        });
      }else{
        this.brand = Object.assign({},defaultBrand);
      }

      //查询案例类型列表
      this.getCaseTypeList();
      //查询案例风格列表
      this.getCaseStyleList();
    },
    methods: {
      getCaseTypeList(){
        findCaseTypeList().then(response => {
          const data = response.data;
          if (data) {
            const typeOptions = [];
            data.some(item => {
              typeOptions.push({
                value: item.id,
                label: item.name
              })
            })
            this.typeOptions = typeOptions;
          }
        },error => {
          console.log('error',error)
        })
      },
      getCaseStyleList(){
        findCaseStyleEntity().then(response => {
          const data = response.data;
          if (data) {
            const styleOptions = [];
            data.some(item => {
              styleOptions.push({
                value: item.id,
                label: item.name
              })
            })
            this.styleOptions = styleOptions;
          }
        },error => {
          console.log('error',error)
        })
      },
      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$confirm('是否提交数据', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              if (this.isEdit) {
                updateCase(this.brand).then(response => {
                  this.$refs[formName].resetFields();
                  this.$message({
                    message: '修改成功',
                    type: 'success',
                    duration:1000
                  });
                  this.$router.back();
                });
              } else {
                addCase(this.brand).then(response => {
                  this.$refs[formName].resetFields();
                  this.brand = Object.assign({},defaultBrand);
                  this.$message({
                    message: '提交成功',
                    type: 'success',
                    duration:1000
                  });
                  this.$router.back();
                });
              }
            });

          } else {
            this.$message({
              message: '验证失败',
              type: 'error',
              duration:1000
            });
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.brand = Object.assign({},defaultBrand);
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>


